<template>
  <div
    v-if="state.visible"
    v-show="state.visible"
    class="ant-drawer ant-drawer-right ant-drawer-open small"
    style="width: 100%"
  >
    <div class="ant-drawer-content-wrapper" style="width: 100%">
      <div class="ant-drawer-header">
        <div class="ant-drawer-title">画板</div>
        <button aria-label="Close" class="ant-drawer-close" @click="onClose">
          <CloseOutlined />
        </button>
      </div>
      <div class="ant-drawer-content p10">
        <div
          id="sketchpadRoot"
          v-if="state.visible"
          style="height: calc(100vh - 80px)"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue'
import {
  insertHtmlResourceJs,
  insertHtmlResourceCss,
  insertHtmlResourceFont
} from 'utils/utils.js'
import { CloseOutlined } from '@ant-design/icons-vue'
import { reactive, nextTick } from 'vue'
const state = reactive({
  imgUrl: '',
  visible: false,
  loadedFn: null
})
const open = (ossUrl, cb) => {
  state.visible = true
  state.imgUrl = ossUrl
  nextTick(() => {
    loadResource()
  })
  state.loadedFn = () => {
    if (!state.imgUrl) {
      return message.error('url不能为空')
    }
    // window.__PLM_GLOBAL__.sketchpad.imageUrl = this.imgUrl
    window.__PLM_GLOBAL__.eventManager.emit('sketchpad.insertImg', {
      url: state.imgUrl,
      insertOnCanvasDirectly: true
    })
  }
  // 监听画板加载完毕
  window.__PLM_GLOBAL__.eventManager.on('sketchpad.loaded', state.loadedFn)
  window.__PLM_GLOBAL__.eventManager.on('sketchpad.export', cb)
}
const loadResource = () => {
  const sketchpadRootJs = document.querySelectorAll('sketchpadRoot')
  if (!sketchpadRootJs.length) {
    insertHtmlResourceFont([
      {
        id: 'sketchpadRoot',
        href: `${process.env.VUE_APP_SKETCHPAD}/Virgil.woff2`
      },
      {
        id: 'sketchpadRoot',
        href: `${process.env.VUE_APP_SKETCHPAD}/Cascadia.woff2`
      }
    ])
    insertHtmlResourceCss([
      {
        id: 'sketchpadRoot',
        href: `${process.env.VUE_APP_SKETCHPAD}/fonts/fonts.css`
      },
      {
        id: 'sketchpadRoot',
        href: `${process.env.VUE_APP_SKETCHPAD}/assets/index.css`
      }
    ])
    insertHtmlResourceJs([
      {
        id: 'sketchpadRoot',
        src: `${
          process.env.VUE_APP_SKETCHPAD
        }/sketchpad.js?t=${new Date().getTime()}`
      }
    ])
  }
}
const removeSketchpadRoot = () => {
  const nodeList = Array.prototype.slice.call(
    document.querySelectorAll('[data-module-id="sketchpadRoot"]')
  )
  nodeList.forEach(element => {
    element.remove()
  })
  window.__PLM_GLOBAL__.eventManager.off('sketchpad.loaded')
  window.__PLM_GLOBAL__.eventManager.off('sketchpad.export')
  window.__PLM_GLOBAL__.eventManager.off('sketchpad.insertImg')
  window.__PLM_GLOBAL__.sketchpad.imageUrl = null
}
const onClose = () => {
  state.visible = false
  removeSketchpadRoot()
}
defineExpose({
  open
})
</script>
<style lang="scss">
.sketchpadRoot_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 8;
  .icon-close {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 30px;
    z-index: 8;
  }
  #sketchpadRoot {
    margin: 20px auto;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}
</style>
